<script setup>
import { ref } from 'vue';
import { ElCard, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import { resetPassword } from '@/api/user'; // 导入重置密码函数
  
const resetForm = ref(null);
const form = ref({
  newPassword: '',
  confirmPassword: ''
});
  
const rules = {
  newPassword: [{ required: true, message: "请输入新密码", trigger: 'blur' }],
  confirmPassword: [{ required: true, message: "请确认新密码", trigger: 'blur' }]
};
  
const submitResetPassword = async () => {
  resetForm.value.validate(async (valid) => {
    if (valid) {
      try {
        await resetPassword(form.value.newPassword, form.value.confirmPassword);
        ElMessage.success('密码重置成功！');
        form.value.newPassword = '';
        form.value.confirmPassword = '';
      } catch (error) {
        ElMessage.error(error.response.data.message || '密码重置失败');
      }
    }
  });
};
</script>

<template>
    <el-card class="reset-password-card" shadow="hover">
      <div class="card-header">
        <span>重置密码</span>
      </div>
      <el-form ref="resetForm" :model="form" :rules="rules" class="reset-password-form">
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="form.newPassword" type="password" autocomplete="new-password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" type="password" autocomplete="new-password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitResetPassword">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  
  <style scoped>
  .reset-password-card {
    max-width: 500px;
    margin: 40px auto;
    .card-header {
      font-size: 18px;
      font-weight: bold;
      padding: 10px 20px;
      border-bottom: 1px solid #ebeef5;
    }
    .reset-password-form {
      padding: 20px;
    }
  }
  </style>
  